<template>
  <div class="announcement-detail">
    <div class="form-wrap">
      <el-form ref="ruleForm" :model="formData" :rules="rules" label-position="top" label-width="80px">
        <el-form-item :label="$t('configLazyLoad.process.nodeName')" prop="DisplayName">
          <el-input v-model.trim="formData.DisplayName"></el-input>
        </el-form-item>
        <el-form-item label="TTS引擎：">
          <el-select v-model="formData.Engine" placeholder="请选择" style="width: 100%;">
            <el-option label="阿里云(推荐)" value="aliTts"></el-option>
            <el-option label="默认" value="default"></el-option>
            <el-option v-if="platform_type === 'ali'" label="mrcp模式" value="mrcp"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="播放文本：" prop="AnnouncementText">
          <el-input type="textarea" v-model="formData.AnnouncementText" maxlength="200"></el-input>
          <p style="font-size: 12px;color: #3B5998;" v-show="formData.Engine !== 'default'">
            可播报变量的值，并支持多个变量。需要替换的变量，请填写到【被替换的变量】字段中用逗号分隔。包含变量的内容，最多播放200个字符。
          </p>
          <p style="font-size: 12px;color: #3B5998;" v-show="formData.Engine === 'default'">
            可播报变量的值。如果需要播报变量的值，请在变量前面加两个下划线，如__FROM_CID。播变量时请不要填写其他文字。
          </p>
        </el-form-item>
        <div v-show="formData.Engine === 'mrcp'">
          <el-form-item label="MRCP语音参数：">
            <el-input v-model="formData.MrcpVar" type="number"></el-input>
            <p style="font-size: 12px;color: #3B5998;">
              v:发音人 Daniel/Karin, g:性别 male/female, pv:音量 silent/x-soft/soft/medium/load/x-loud/default, pr:速度 x-slow/slow/medium/fast/x-fast/default。 配置样例: v=Daniel&g=male&pv=default&pr=default 如果不填写就使用默认配置
            </p>
          </el-form-item>
        </div>
        <div v-show="formData.Engine === 'aliTts'">
          <el-form-item label="被替换的变量：">
            <el-input v-model="formData.ReplaceVar"></el-input>
            <p style="font-size: 12px;color: #3B5998;">
              文本中含有多个变量，用逗号分隔。例如：FROM_CID, FROM_DID,JOBNUM
            </p>
          </el-form-item>
          <el-form-item label="发音人：">
            <el-select v-model="formData.VoiceName" placeholder="请选择" style="width: 100%;">
              <el-option label="小云(青年女声-[普通话])" value="xiaoyun"></el-option>
              <el-option label="小刚(青年男声-[普通话])" value="xiaogang"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="语速：" prop="Speed">
            <el-input v-model="formData.Speed" type="number" min="-500" max="500"></el-input>
            <p style="font-size: 12px;color: #3B5998;">
              范围-500~500,默认值为0
            </p>
          </el-form-item>
          <el-form-item label="语调：" prop="Pitch">
            <el-input v-model="formData.Pitch" type="number" min="-500" max="500"></el-input>
            <p style="font-size: 12px;color: #3B5998;">
              范围-500~500,默认值为0
            </p>
          </el-form-item>
          <el-form-item label="音量：" prop="Volume">
            <el-input v-model="formData.Volume" type="number" min="0" max="100"></el-input>
            <p style="font-size: 12px;color: #3B5998;">
              范围1~100
            </p>
          </el-form-item>
        </div>
        <div v-show="formData.Engine === 'default'">
          <el-form-item label="文字时间间隔：" prop="WordInterval">
            <el-input v-model="formData.WordInterval" type="number" min="0" max="99999">
              <template slot="append">毫秒</template>
            </el-input>
            <p style="font-size: 12px;color: #3B5998;">
              文字时间间隔必须是大于等于0的整数
            </p>
          </el-form-item>
          <el-form-item label="标点符号时间间隔：" prop="SignInterval">
            <el-input v-model="formData.SignInterval" type="number" min="0" max="99999">
              <template slot="append">毫秒</template>
            </el-input>
            <p style="font-size: 12px;color: #3B5998;">
              标点符号时间间隔必须是大于等于0的整数
            </p>
          </el-form-item>
          <el-form-item>
            <span style="font-size: 12px;color: #000;margin-right: 16px;">播报数字：</span>
            <el-radio-group v-model="formData.IsMoney">
              <el-radio label="true">是</el-radio>
              <el-radio label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item label="播放结束后转向：">
          <node-select-item ref="nodeSelect" :curPbx="curPbx" :ToPeerType="form.ToPeerType" :ToPeer="form.ToPeer"></node-select-item>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <el-button class='slide-box__button' @click='cancelClick'>
        取消
      </el-button>
      <el-button class='slide-box__button' type="primary" @click='saveClick'>
        保存
      </el-button>
    </div>
  </div>
</template>
<script>
  import {deepClone} from '@/utils/m7Utils'
  import nodeSelectItem from '../../base/nodeSelectItem.vue'
  export default {
    name: 'mainIvrTextAnnouncementNodeLink',
    data () {
//      let validate1 = (rule, value, callback) => {
//        if (value < -500 || value > 500) {
//          callback(new Error(this.$t('范围-500~500')))
//        } else {
//          callback()
//        }
//      }
//      let validate2 = (rule, value, callback) => {
//        if (value < 0 || value > 100) {
//          callback(new Error(this.$t('范围1~100')))
//        } else {
//          callback()
//        }
//      }
//      let validate3 = (rule, value, callback) => {
//        if (value < 0 || value > 99999) {
//          callback(new Error(this.$t('范围大于0')))
//        } else {
//          callback()
//        }
//      }
      return {
        formData: {
          _id: '',
          DisplayName: '',
          Engine: '',
          AnnouncementText: '',
          MrcpVar: '',
          ReplaceVar: '',
          VoiceName: '',
          Speed: '',
          Pitch: '',
          Volume: '',
          WordInterval: '',
          SignInterval: '',
          IsMoney: '',
          ToPeerType: '',
          ToPeer: ''
        },
        rules: {
          DisplayName: [
            { required: true, message: this.$t('configLazyLoad.process.processLabel7'), trigger: 'blur' }
          ],
          AnnouncementText: [
            { required: true, message: '请输入播放文本', trigger: 'blur' }
          ]
//          Speed: [
//            { validator: validate1, required: true, message: '请正确输入语速', trigger: 'blur' }
//          ],
//          Pitch: [
//            { validator: validate1, required: true, message: '请正确输入语调', trigger: 'blur' }
//          ],
//          Volume: [
//            { validator: validate2, required: true, message: '请正确输入音量', trigger: 'blur' }
//          ],
//          WordInterval: [
//            { validator: validate3, required: true, message: '请正确输入文字时间间隔', trigger: 'blur' }
//          ],
//          SignInterval: [
//            { validator: validate3, required: true, message: '请正确输入标点符号时间间隔', trigger: 'blur' }
//          ]
        }
      }
    },
    props: {
      form: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    components: {
      nodeSelectItem
    },
    computed: {
      Account () {
        return this.$store.state.session.account.account
      },
      curPbx () {
        return this.$store.state.config.callCenter.currentPBX
      },
      platform_type () {
        return this.$store.state.platform_urls.platform_type
      }
    },
    methods: {
      init () {
        this.formData = deepClone(this.form)
        this.formData.Engine = this.form.Engine === 'kdxf' ? 'default' : this.form.Engine
        this.formData.IsMoney = this.form.IsMoney === '1' ? 'true' : 'false'
      },
      cancelClick () {
        this.$emit('cancelClick')
      },
      saveClick () {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            if (this.formData.Engine === 'aliTts') {
              if (!this.formData.VoiceName) {
                this.$message.error('发音人必须填写')
                return
              }
              if (this.formData.Speed < -500 || this.formData.Speed > 500) {
                this.$message.error('请正确输入语速')
                return
              }
              if (this.formData.Pitch < -500 || this.formData.Pitch > 500) {
                this.$message.error('请正确输入语调')
                return
              }
              if (this.formData.Volume < 1 || this.formData.Volume > 100) {
                this.$message.error('请正确输入音量')
                return
              }
            }
            if (this.formData.Engine === 'default') {
              if (!this.formData.WordInterval || this.formData.WordInterval < 0 || this.formData.WordInterval > 99999) {
                this.$message.error('请正确输入文字时间间隔')
                return
              }
              if (!this.formData.SignInterval || this.formData.SignInterval < 0 || this.formData.SignInterval > 99999) {
                this.$message.error('请正确输入标点符号时间间隔')
                return
              }
            }
            this.formData.ToPeerType = this.$refs.nodeSelect.ToPeerTypeThis
            this.formData.ToPeer = this.$refs.nodeSelect.ToPeerThis
            let obj = deepClone(this.formData)
            obj.PBX = this.curPbx
            obj.Account = this.Account
            obj.IsMoney = obj.IsMoney === 'false' ? 0 : 1
            this.$store.dispatch('updateTextAnnouncement', obj).then(res => {
              if (res && res.success) {
                this.$message({
                  type: 'success',
                  message: '保存成功!'
                })
                this.updateVuexPbx()
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      updateVuexPbx () {
        this.$store.dispatch('queryTextAnnouncement', {Account: this.Account, PBX: this.curPbx}).then(resp => {
          if (resp && resp.success) {
            this.$store.commit('SET_IVRMAP_DETAIL', {PBX: this.curPbx, typeName: 'ivr_node_text_announcement', data: resp.list || [], flag: 'data', node: this})
          }
          this.$emit('saveClick')
        })
      }
    },
    watch: {
      form: {
        deep: true,
        handler (nv, ov) {
          this.init()
          this.$refs.nodeSelect.init()
        }
      }
    },
    beforeMount () {
      this.init()
    }
  }
</script>

<style lang="stylus" scoped>
  .announcement-detail
    position relative
    width 100%
    height 100%
  .form-wrap
    padding 20px
    height calc(100% - 100px)
    overflow-y scroll
    .el-form-item
      margin-bottom 10px
  .footer
    position absolute
    bottom 0
    right 0
    width 100%
    background rgba(255,255,255,1)
    box-shadow 0px -2px 4px 0px rgba(5,49,38,0.05)
    border-top 1px solid rgba(232,232,232,1)
    display flex
    justify-content center
    padding 13px 0
    box-sizing border-box
    .slide-box__button
      padding 8px 20px 8px
      box-sizing border-box
</style>
